<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
        <el-tab-pane label="下载" name="first">
          下载页面
        </el-tab-pane>

        <el-tab-pane label="全局消息总线bus组件值传递" name="second">
          <Student />
          <div id="studentInfo">
            <h3>Student-数据展示区</h3>
            <ul>
              <li><b>姓名：</b>{{ studentName }}</li>
              <li><b>其他信息：</b></li>
              <li v-for="(item, key) in studentOtherMsg" :key="key">{{ item }}</li>
            </ul>
          </div>
        </el-tab-pane>

        <el-tab-pane label="消息发布与订阅" name="third">
          <div>
            <h3>消息发布和订阅</h3>
            <MyPublish />
            <MySubscribe />
          </div>
        </el-tab-pane>

        <el-tab-pane label="菜单" name="fourth">
          <Index />
        </el-tab-pane>
      
    </el-tabs>

  </div>

</template>

<script>
import Student from '@test/Student'
import MyPublish from '@common/pubsub/MyPublish'
import MySubscribe from '@common/pubsub/MySubscribe'
import Index from '@pages/Index'
export default {
  name: 'HelloWorld',
  data() {
    return {
      activeName: 'second',
      studentName: '',
      studentOtherMsg: []
    }
  },
  props: {
    msg: String
  },
  components: {
    Student,
    MyPublish,
    MySubscribe,
    Index
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    download() {
      this.$axios({
        method: 'post',
        url: this.$proxy + '/bill/disclosure/download/template',
        responseType: 'blob'
      }).then(res => {
        this.$utils.downloadFile(res)
      }).catch(err => {
        this.$message.error("请求处理失败" + err)
      })
    },

    getMsg() {
      return `你好啊，${this.studentName}`
    },

    /**
     * 用于接收自定义事件（studentData）绑定的数据
     * @param {String} msg 
     * @param  {...String} params 
     */
    getData(name, ...params) {
      this.studentName = name
      this.studentOtherMsg = params
    },
  },
  mounted() {
    // 往消息总线$bus绑定自定义事件
    this.$bus.$on('studentData', this.getData)

  },
  watch: {
    // studentName监听
    studentName(value) {
      console.log('正常输出:', value)
      console.log('数组分隔输出:', ...value)
    }
  },
  beforeDestroy() {
    // 往消息总线$bus解绑自定义事件
    this.$bus.$off('studentData')
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

#studentInfo {
  border: thin solid orange;
  padding: 10px 20px;
}
</style>
